import React from 'react';
import {WeaSearchGroup, WeaFormItem, WeaBrowser, WeaSelect, WeaInputNumber,WeaCheckbox, WeaInput} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EType from './base/EType';
import ETitle from './base/ETitle';
import EShowNum from './base/EShowNum';
import ELinkMode from './base/ELinkMode';
//import EField from './base/EField';
import EField_New from './base/EField_New';
import EScrollDirection from './base/EScrollDirection';

// 公告元素
export default class Content_newNotice extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            eNewNoticeFrom: this.props.eNewNoticeFrom.selected,
            eNewNoticePublisher: this.props.eNewNoticePublisher,
            eNewNoticePublisherNames: this.props.eNewNoticePublisherNames,
            eFieldNewDataSource: this.props.eFieldNewDataSource,
            eFieldNewUsedKeys: this.props.eFieldNewUsedKeys,
            eFieldNewVisible: false,
            eNoticeIsText: this.props.eNewNoticeIsText,
            eMultiPage: this.props.eNewNoticeMultiPage,
            eNoticeScrollSpeed: this.props.eNewScrollSpeed || '20',
            eNoticeNew: this.props.eNewNoticeNew || '0',
            ePageSize: this.props.eNewNoticePageSize || '3',
            status: this.props.eScrollDirection.selected || '0',
        };
        this.onChangeStatus = this.onChangeStatus.bind(this);
    }

    onChangeStatus(v){
        this.setState({
            status: v
        })
        if(v != '0') this.setState({eMultiPage: '0'})
        if(v != '0' || v != '4') this.setState({eNoticeIsText: '0'})
    }

    render() {
        const {eNewNoticeFrom, eNewNoticePublisherNames, eFieldNewDataSource, eFieldNewUsedKeys,
            eFieldNewVisible, eNoticeIsText, eMultiPage, eNoticeScrollSpeed, eNoticeNew, ePageSize, status} = this.state;

        let EFieldNewshow = <div></div>;
        let EFieldNew = <div></div>;
        if (eFieldNewVisible) {
            const eFieldNewProps = {
                eFieldNewDataSource: _.cloneDeep(eFieldNewDataSource),
                eFieldNewUsedKeys: _.cloneDeep(eFieldNewUsedKeys),
                onOk: (data) => {
                    this.setState({
                        eFieldNewDataSource: _.cloneDeep(data.eFieldNewDataSource),
                        eFieldNewUsedKeys: _.cloneDeep(data.eFieldNewUsedKeys),
                        eFieldNewVisible: false
                    });
                },
                onCancel: () => {
                    this.setState({
                        eFieldNewVisible: false
                    });
                }
            };
            EFieldNewshow = (
                <EField_New ecId={`${this && this.props && this.props.ecId || ''}_EField_New@yiz8gz`} {...eFieldNewProps}/>
            );
        }
        const eFieldNewUsedNames = [];
        for (let i = 0; i < eFieldNewUsedKeys.length; i++) {
            for (let j = 0; j < eFieldNewDataSource.length; j++) {
                if (eFieldNewUsedKeys[i] == eFieldNewDataSource[j].key) {
                    eFieldNewUsedNames.push(eFieldNewDataSource[j].name);
                }
            }
        }
        let _eNoticeScrollSpeed=eNoticeScrollSpeed;
        if(eNoticeScrollSpeed==undefined){
            _eNoticeScrollSpeed=20;
        }
        EFieldNew = this.props.eShareLevel == '2' ? (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@2snhvz`} label={getLabel(19495, '显示字段')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                {EFieldNewshow}
                <div style={{height: '30px', lineHeight: '23px'}}>
                    <i className="icon-coms-Flow-setting portal-esetting-btn" onClick={() => this.setState({eFieldNewVisible: true})}/>
                    <span>{eFieldNewUsedNames.join('，')}</span>
                </div>
            </WeaFormItem>
        ) : '';
        let ENewNoticeFrom = <div></div>;
        let ENewNoticePublisher = <div></div>;
        let ENoticeIsText = <div></div>;
        let EMultiPage = <div></div>;
        let ENoticeScrollSpeed = <div></div>;
        let ENoticeNew = <div></div>;
        if (this.props.eShareLevel == '2') {
            ENewNoticeFrom = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@cwnfq4`} label={getLabel(20885, '内容来源')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@p2vpga`}
                        options={
                            this.props.eNewNoticeFrom.options.map((item) => {
                                return {key: item.key, selected: false, showname: item.value};
                            })
                        }
                        value={eNewNoticeFrom}
                        style={{width: '200px'}}
                        onChange={value => {
                            this.setState({eNewNoticeFrom: value});
                        }}
                    />
                </WeaFormItem>
            );

            ENewNoticePublisher = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@64tea7`} label={getLabel(1861, '发布人')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@zchqqi`}
                        type={17}
                        isSingle={false}
                        replaceDatas={eNewNoticePublisherNames || []}
                        onChange={(ids, names, datas) => this.setState({eNewNoticePublisher: ids, eNewNoticePublisherNames: datas})}
                        layout={document.body}
                    />
                </WeaFormItem>
            );

            EMultiPage = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@y28h70`} label={getLabel(520253, '多页显示')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <div style={{width: '60px', position: 'relative'}}>
                        <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@tve7t4`}
                            value={eMultiPage}
                            display="switch"
                            style={{display: 'inline'}}
                            onChange={v => {
                                let value = v;
                                if(v == '1') value=0;
                                this.setState({
                                    eMultiPage: v,
                                    eNoticeIsText: value
                                });
                            }}
                        />
                    </div>
                    {eMultiPage == '1' &&
                    <div style={{display: 'inline-block', position: 'absolute', left: '42px', bottom: '3px'}}>
                        <div style={{display: 'inline-block', marginLeft: '15px'}}>{getLabel(520254, '每页条数')}</div>
                        <div style={{display: 'inline-flex', width: '60px', marginLeft: '20px'}}>
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@k4iu8s`}
                                value={ePageSize}
                                onChange={v => {
                                    this.setState({ePageSize: v})
                                }}/>
                        </div>
                    </div>
                    }
                </WeaFormItem>
            );

            ENoticeScrollSpeed = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@tw7fj5`} label={getLabel(22927, '滚动速度')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@84hvhl`} value={_eNoticeScrollSpeed} style={{width: '100px'}}  min={0} onChange={value => this.setState({eNoticeScrollSpeed:  value=='0'?20:value})}/>
                    <div style={{display: 'inline-block', margin: '8px 15px'}}>ms</div>
                </WeaFormItem>
            );

            ENoticeNew = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@q3l7zs`} label={getLabel(520252, '显示新建按钮')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@ncqxkx`}
                        value={eNoticeNew}
                        display="switch"
                        style={{display: 'inline'}}
                        onChange={v => {
                            this.setState({
                                eNoticeNew: v,
                            });
                        }}
                    />
                </WeaFormItem>
            );

            ENoticeIsText = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@c09883`} label={getLabel(19111, '纯文本格式')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@500kml`}
                        value={eNoticeIsText}
                        display="switch"
                        style={{display: 'inline'}}
                        onChange={v => {
                            let value = v;
                            if(v == '1') value=0;
                            this.setState({
                                eNoticeIsText: v,
                                eMultiPage: value
                            });
                        }}
                    />
                </WeaFormItem>
            );
        }

        return (
            <div>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ryv5zg`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true}>
                    <EType ecId={`${this && this.props && this.props.ecId || ''}_EType@wot18d`} ref="eType" value={this.props.eBaseName}/>
                    {this.props.eShareLevel == '2' ? <ETitle ecId={`${this && this.props && this.props.ecId || ''}_ETitle@64p3er`} ref="eTitle" eid={this.props.eid} value={this.props.eTitle} {...this.props}/> : ''}
                    <EShowNum ecId={`${this && this.props && this.props.ecId || ''}_EShowNum@935775`} ref="eShowNum" value={this.props.eShowNum}/>
                    {eNewNoticeFrom == '2' && <ELinkMode ecId={`${this && this.props && this.props.ecId || ''}_ELinkMode@8tglb7`} ref="eLinkMode" options={this.props.eLinkMode.options} value={this.props.eLinkMode.selected}/>}
                    {EFieldNew}
                    {ENewNoticeFrom}
                    {ENewNoticePublisher}
                    {this.props.eShareLevel == '2' ? <EScrollDirection ecId={`${this && this.props && this.props.ecId || ''}_EScrollDirection@7apsa7`} ref="eScrollDirection" options={this.props.eScrollDirection.options} value={this.props.eScrollDirection.selected} onChange={this.onChangeStatus}/> : ''}
                    {status == '0' ? EMultiPage : ENoticeScrollSpeed}
                    {
                        eNewNoticeFrom == '2' && (status == '2'||status == '4')? ENoticeIsText: null
                    }
                    {
                        eNewNoticeFrom == '2'?ENoticeNew : null
                    }

                </WeaSearchGroup>
            </div>
        );
    }

    getSaveValues() {
        return {
            eContentTitle: this.refs['eTitle'] ? this.refs['eTitle'].getSaveValues() : this.props.eTitle,
            eContentShowNum: this.refs['eShowNum'].getSaveValues(),
            eContentLinkMode: this.refs['eLinkMode'] && this.refs['eLinkMode'].getSaveValues() || '1',
            eContentFieldNewUsedKeys: this.state.eFieldNewUsedKeys,
            eContentNewNoticeFrom: this.state.eNewNoticeFrom,
            eContentNewNoticePublisher: this.state.eNewNoticePublisher,
            eContentScrollDirection: this.refs['eScrollDirection'] ? this.refs['eScrollDirection'].getSaveValues() : this.props.eScrollDirection.selected,
            eContentNoticeIsText: this.state.eNoticeIsText,
            eContentNoticeNew: this.state.eNoticeNew,
            eContentMultiPage: this.state.eMultiPage,
            eContentNoticeScrollSpeed: this.state.eNoticeScrollSpeed,
            eContentPageSize: this.state.ePageSize,
        };
    }
}